<template>
    <transition name="slide-right">
        <div class="content">
            <div class="content-wrapper" v-if="bookAvailable">
                <div class="content-item" v-for="(item,index) in navigation.toc" :key="index" @click="jumpTo(item.href)">
                    <span class="text">{{item.label}}</span>
                </div>
            </div>
            <div class="empty" v-else>加载中。。。</div>
        </div>
    </transition>
</template>

<script>
export default {
    props: {
        bookAvailable: Boolean,
        navigation: Object,
        ifShowContent: Boolean
    },
    methods: {
        jumpTo(href) {
            this.$emit('jumpTo', href)
        }
    }
}

</script>
<style lang="scss" scoped>
@import "../assets/styles/global";
.content {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 102;
    width: 80%;
    height: 100%;
    background: white;
    .content-wrapper {
        width: 100%;
        height: 100%;
        overflow: auto;
        .content-item {
            padding: px2rem(20) px2rem(15);
            border-bottom: px2rem(1) solid #f4f4f4;
            .text {
                font-size: px2rem(14);
                color: #333;
            }
        }
    }
    .empty {

    }
    &.slide-right-enter, &.slide-right-leave-to {
        transform: translate3d(-100%, 0, 0);
    }
    // &.slide-right-enter-to, &.slide-right-leave {
        // opacity: 1;
    // }
    &.slide-right-enter-active, &.slide-right-leave-active {
        transition: all .3s linear;
    }
}

</style>